<template>
  <div class="app-container">


    <!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"
      @resetSearchEventEmit="resetSearchEventEmit"
      @searchEventEmit="searchEventEmit"
    >
    </search-form>


    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :isVxeCheckbox="false"
      :isVxeColSeq="true"
      :isVxeHandleS="false"
      :isVxeToolbar="false"
      :loading.sync="loading"
      :tableColumn="tableColumn"
      :tableData="tableData"
      @customSortMethodEmit="customSortMethodEmit"
    >
    </ex-base-table>

    <!-- 分页组件 -->
    <Pagination
      v-show="tablePage.totalResult>0"
      :limit.sync="tablePage.pageSize"
      :page.sync="tablePage.currentPage"
      :total="tablePage.totalResult"
      @pagination="pageFindList"
    />
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

import {fetchissuebonds} from './service/baseApi'
// 基础表格组件
import ExBaseTable from '@/components/VxeTable/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'
// 检索表单
import SearchForm from './components/SearchForm'
import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExBaseTable,
    Pagination,
    SearchForm
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {
        tickershortname: '',
        entity: '',


      },
      // 排除条件
      sortField: '',
      sortFlag: '',


      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: undefined,
        bond_type: "",
        bond_code: '',
        bond_name: "",
        bond_abd: '',
        publisher: '',
        iss_type: '',
        iss_price: '',
        iss_rate: '',
        iss_grade: '',
        curr_name: '',
        total_num: '',
        is_sbn_debt: '',
        it_by_date: '',
        due_date: '',
        bond_term_y: '',
        bond_term_d: '',
        pay_date: '',
        vlt_rate: '',
        ec_date: '',
        rdp_date: '',
        is_ey_pay: '',
        is_redeem: '',
        is_option: '',
      },
      initFormSubmitData: {
        id: undefined,
        bond_type: "",
        bond_code: '',
        bond_name: "",
        bond_abd: '',
        publisher: '',
        iss_type: '',
        iss_price: '',
        iss_rate: '',
        iss_grade: '',
        curr_name: '',
        total_num: '',
        is_sbn_debt: '',
        it_by_date: '',
        due_date: '',
        bond_term_y: '',
        bond_term_d: '',
        pay_date: '',
        vlt_rate: '',
        ec_date: '',
        rdp_date: '',
        is_ey_pay: '',
        is_redeem: '',
        is_option: '',
      },
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据
    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {


    /* API数据操作相关 */
    // 查询数据
    findList() {
      this.loading = true
      console.log(' this.formSearchData:::', this.formSearchData);
      console.log('打印当前页：：：：', this.tablePage.currentPage);
      // 请求表格数据
      fetchissuebonds({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        sortField: this.sortField,
        sortFlag: this.sortFlag,
        ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        console.log('response:....', data);
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    /* 分页组件相关 */
    // 分页事件（页码切换，每页页数切换）
    pageFindList() {
      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        // { type: 'seq', width: 60, fixed: null },
        // { type: 'checkbox', width: 50, fixed: null },
        {field: 'tickershortname', title: '债券简称', width: 200, showOverflow: true},
        {field: 'tickercode', title: '代码', width: 200},
        {field: 'actualfinancingamount', title: '债券发行规模', width: 200, sortable: true},
        {field: 'couponrate', title: '票面利率', width: 200,},
        {field: 'valuedate', title: '起息日', width: 200,},
        {field: 'maturitydateexercisebefore', title: '到期日（行权前）', width: 200},
        {field: 'maturitydateexerciseafter', title: '到期日（行权后）', width: 200},
        {field: 'deadlineftp', title: 'FTP期限', width: 200},
        {field: 'intoftp', title: '是否纳入FTP', width: 200},
        {field: 'entity', title: '发行主体', width: 200},
        {field: 'entityid', title: '发行主体ID', width: 200},

        {field: 'department', title: '发行部门', width: 200},
        {field: 'exercisestate', title: '行权状态', width: 200},
        {field: 'costequivalenceration', title: '费用等值率', width: 200},
        {field: 'realdate', title: '实际期限', width: 200},
        {field: 'theorydate', title: '理论期限', width: 200},
        {field: 'istheory', title: '是否选取理论期限', width: 200},
        {field: 'choose', title: '选择期限', width: 200},
        {field: 'IDENTIFIED', title: '确定期限', width: 200},
        {field: 'pf', title: '本金*票面', width: 200},

        // {
        //   field: 'is_option', title: '是否有选择权', width: 300, formatter(obj) {
        //     if (obj.cellValue == null) {
        //       return "否"
        //     } else {
        //       if (obj.cellValue == 0) {
        //         return "否"
        //       } else {

        //         return "是"
        //       }

        //     }
        //   }
        // },

      ]
      this.tableColumn = tabCols;
    },
    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      console.log("searchEventEmit", this.formSearchData);
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      console.log("resetSearchEventEmit", this.formSearchData);
      this.tablePage.currentPage = 1
      this.findList()
    },
    /* 排序 */
    /* 排序 */
    customSortMethodEmit(property, order) {
      this.sortField = property
      this.sortFlag = order
      console.log('触发排序emit');
      this.findList()

    },


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 测试功能-下拉分页表格
    // this.keyupEvent4()
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>
